<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		input,button{
			height: 50px;
			border-radius: 6px;
		}
		input{
			width: 260px;
			border: 1px solid darkgray;
			padding-left: 8px;
		}
		button{
			width: 80px;
			color: #FFFFFF;
			font-size: 15px;
			font-weight: bold;

			border: 0px;
		}
		#find{
			background-color: darkorange;
		}
		#add{
			background-color: palegreen;
		}
		table{
			width: 90%;
			text-align: center;
		}
		table tr:hover{
			background-color: beige;
		}
		#addUserInfoDialog{
			display: none;
			position: absolute;
			left: 200px;
			top:120px;
			box-shadow: 6px 6px 12px gray;
			border-radius: 6px;
			width: 600px;
			height: 360px;
			text-align: center;
			background-color: aliceblue;

		}
		#addUserInfoDialog div{
			line-height: 60px;

		}
		#insert{
			margin-left: 60px;
			background-color: cornflowerblue;
		}
		#close{
			margin-left: 30px;
			background-color: grey;
		}
		a{
			display: inline-block;
			width: 60px;
			height: 40px;
			border-radius: 6px;
			border: 0px;
			color: #FFFFFF;
			font-size: 13px;
			text-decoration: none;
			line-height: 40px;
		}
	</style>
</head>
<body>
<div>
<%--	搜索部分--%>
	<div id="search">
		<form action="getUserInfoes" method="get">
			<input placeholder="请输入..." name="username"/>
			<button id="find">查询</button>
			<button id="add" type="button" onclick="addUserInfoMethod()">新增</button>
		</form>
	</div>
<%--	列表显示部分--%>
	<div>
		<table>
			<thead>
			<tr>
				<th>
					序号
				</th>
				<th>
					用户名
				</th>
				<th>
					密码
				</th>
				<th>
					家庭住址
				</th>
				<th>
					联系方式
				</th>
				<th>
					操作
				</th>
			</tr>
			</thead>
			<tbody>
			<c:forEach items="${userinfoes}" var="userinfo" varStatus="status">
				<tr>
					<td>${status.index+1}</td>
					<td>${userinfo.username}</td>
					<td>${userinfo.userpwd}</td>
					<td>${userinfo.useraddress}</td>
					<td>${userinfo.usertel}</td>
					<td>
						<a style="background-color: cadetblue;" href="http://localhost:8086/getUserInfoById?id=${userinfo.id}">编辑</a>
						<a style="background-color: orangered;" href="http://localhost:8086/deleteUserInfoById?id=${userinfo.id}">删除</a>
						<button style="width: 85px;height: 40px;line-height: 40px;background-color: red" onclick="deleteUserByAjax(${userinfo.id})">ajax删除</button>
					</td>
				</tr>
			</c:forEach>
			</tbody>
		</table>
	</div>
<%--	用户信息新增的模态框--%>
	<div id="addUserInfoDialog">
		<form action="insertUserInfo" method="post">
			<div style="margin-top: 30px;">
				用&nbsp; 户 &nbsp; 名&nbsp;<input type="text" placeholder="请输入用户名" name="username" />
			</div>
			<div>
				密&nbsp; &nbsp; &nbsp; &nbsp;码&nbsp; <input type="text" placeholder="请输入密码" name="userpwd" />
			</div>
			<div>
				家庭住址&nbsp; <input type="text" placeholder="请输入家庭住址" name="useraddress" />
			</div>
			<div>
				联系方式&nbsp; <input type="text" placeholder="请输入联系方式" name="usertel" />
			</div>
			<div>
				<button id="insert">新增</button>
				<button type="button" id="close" onclick="closeDialog()">关闭</button>
			</div>
		</form>
	</div>


</div>
</body>
<script>
	function addUserInfoMethod(){
		var userInfoAddDialog=document.getElementById("addUserInfoDialog");
		userInfoAddDialog.style.display="block"
	}
	function closeDialog(){
		var userInfoAddDialog=document.getElementById("addUserInfoDialog");
		userInfoAddDialog.style.display="none"
	}

	function deleteUserByAjax(userid){
		var ajaxRequest=new XMLHttpRequest()
		ajaxRequest.open("get","http://localhost:8086/deleteUserInfoByAjax?id="+userid,"true")
		ajaxRequest.send()
		ajaxRequest.onreadystatechange=function(response){
			if(ajaxRequest.readyState==4){
				alert("删除成功")
				location.reload()
			}
		}
	}

</script>
</body>
</html>
